<!-- ——***** 注意！！这是template路由下的功能页面1的根页面，在该页面下可以引用自己components中的组件，和utils中的工具 *****—— -->
<template>
  <div class="function1-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <data-display title="数据展示面板1">
          <div class="data-item">
            <span>当前时间：</span>
            <span>{{ currentTime }}</span>
          </div>
          <div class="data-item">
            <span>格式化数字：</span>
            <span>{{ formattedNumber }}</span>
          </div>
        </data-display>
      </el-col>
      <el-col :span="12">
        <data-display title="数据展示面板2">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="value" label="数值" />
          </el-table>
        </data-display>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DataDisplay from './components/DataDisplay'
import { formatDate, formatNumber } from './utils/test'

import { function1 } from '@/api/template/function1'

export default {
  name: 'Function1',
  components: {
    DataDisplay
  },
  data() {
    return {
      // ——***** 注意！！变量是驼峰命名，如currentTime *****——
      // ——***** 注意！！常量是大写+下划线，如USER_STATUS *****——
      currentTime: '',
      formattedNumber: '',
      tableData: [
        { date: '2023-01-01', name: '示例1', value: 100 },
        { date: '2023-01-02', name: '示例2', value: 200 },
        { date: '2023-01-03', name: '示例3', value: 300 }
      ],
      listXX: null,
      loading: true
    }
  },
  mounted() {
    this.updateTime()
    this.formattedNumber = formatNumber(1234567)
    // 更新时间的定时器
    setInterval(this.updateTime, 1000)
  },
  methods: {
    // ——***** 注意！！方法名是动词+名词 如getTime *****——
    updateTime() {
      this.currentTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    },
    getList() {
      this.loading = true
      function1().then(res => {
        this.listXX = res.rows
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
/* ——***** 注意！！该页面的样式写在自己vue文件的下面，注意要加scope限定本页面范围 *****—— */
.function1-container {
  padding: 20px;
}
.data-item {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}
</style>